<template>
    <div class="videoBox">
        <video ref="videoPlayer">
            <source src="./video/test3.mp4" type="video/mp4">
        </video>
        <button @click="togglePlay" class="btn">{{ isPlaying ? '暂停' : '开始' }}</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const videoPlayer = ref();
const isPlaying = ref(false);

const togglePlay = () => {
    if(isPlaying.value){ 
        videoPlayer.value.pause();
    }else{
        videoPlayer.value.play()
    }
    isPlaying.value = !isPlaying.value 
}


</script>

<style scoped>
.videoBox{
    position: relative;
}
.btn{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: transparent;
}
</style>